<template>
  <div class="order">
    <div class="order__price">
      实付金额￥<b>{{ calculations.price }}</b>
    </div>
    <div class="order__btn" @click="() => handleShowConfirmChange(true)">
      提交订单
    </div>
  </div>
  <div
    class="mask"
    v-show="showConfirm"
    @click="() => handleShowConfirmChange(false)"
  >
    <div class="mask__content" @click.stop>
      <h3 class="mask__content__title">确认要离开收银台？</h3>
      <p class="mask__content__desc">请尽快完成支付，否则将被取消</p>
      <div class="mask__content__btns">
        <div
          class="mask__content__btn mask__content__btn--first"
          @click="() => handleConfirmOrder(true)"
        >
          取消订单
        </div>
        <div
          class="mask__content__btn mask__content__btn--last"
          @click="() => handleConfirmOrder(false)"
        >
          确认订单
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useCommonCartEffect } from "../../effects/cartEffects";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import { computed } from "vue";
import { post } from "../../utils/request";
import Toast, { useToastEffect } from "../../components/Toast";
import axios from "axios";

//下单相关逻辑
const useMakeOrderEffect = (shopId, shopName, productList) => {
  const router = useRouter();
  const store = useStore();
  const { showToast } = useToastEffect(); //Toast逻辑

  const handleConfirmOrder = async (isCanceled) => {
    const products = [];
    console.log(productList, "---productList---");
    for (let i in productList.value) {
      const product = productList.value[i];
      products.push({
        id: parseInt(product._id, 10),
        num: product.count,
      });
    }

    console.log(products);
    axios
      .post(
        "/api/shop/order" /* , {
          addressId: 1,
          shopId,
          shopName:shopName.value,
          isCanceled,
          products,
        } */
      )
      .then((result) => {
        if (result.data.errno === 0) {
          // const cartList = JSON.parse(localStorage.cartList || "{}");
          // delete cartList[shopId];
          // localStorage.cartList = JSON.stringify();
          store.commit("clearCartData", shopId);
          router.push({ name: "OrderList" });
        } else {
          showToast("请求失败"); //方法
        }
      })
      .catch((err) => {
        showToast("请求失败");
      });
  };
  return { handleConfirmOrder };
};

//蒙层展示相关
const useShowMaskEffect = () => {
  const showConfirm = ref(false);
  const handleShowConfirmChange = (status) => {
    showConfirm.value = status;
  };
  return { showConfirm, handleShowConfirmChange };
};

export default {
  name: "Order",
  setup() {
    const route = useRoute();
    const store = useStore();
    const shopId = parseInt(route.params.id, 10);
    const cartList = store.state.cartList; //仓库里的商品信息
    // const { shopName，calculations, productList} = useCommonCartEffect(shopId);
    const shopName = computed(() => {
      const shopName = cartList[shopId]?.shopName || "";
      return shopName;
    });

    const productList = computed(() => {
      const productList = cartList[shopId] || {};
      const notEmptyProductList = {};
      for (let i in productList) {
        const product = productList[i];
        if (product.count > 0) {
          notEmptyProductList[i] = product;
        }
      }
      console.log(notEmptyProductList);
      return notEmptyProductList;
    });

    const calculations = computed(() => {
      const productList = cartList[shopId];
      const result = { total: 0, price: 0, allChecked: true };
      if (productList) {
        for (let i in productList) {
          const product = productList[i];
          result.total += product.count;
          if (product.check) {
            result.price += product.count * product.price;
          }
          //全选
          if (product.count > 0 && !product.check) {
            result.allChecked = false;
          }
        }
      }
      result.price = result.price.toFixed(2);
      return result;
    });

    const { showConfirm, handleShowConfirmChange } = useShowMaskEffect();

    //确认订单
    const { handleConfirmOrder } = useMakeOrderEffect(
      shopId,
      shopName,
      productList
    );

    return {
      showConfirm,
      handleShowConfirmChange,
      calculations,
      handleConfirmOrder,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/viriables.scss";
.order {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  height: 0.49rem;
  line-height: 0.49rem;
  background: $bgColor;
  &__price {
    flex: 1;
    text-indent: 0.24rem;
    font-size: 0.14rem;
    color: $content-fontcolor;
  }
  &__btn {
    width: 0.98rem;
    background: #4fb0f9;
    color: $bgColor;
    text-align: center;
    font-size: 0.14rem;
  }
}
//遮罩弹窗
.mask {
  z-index: 1;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5); //背景
  &__content {
    //白色内容水平垂直居中
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 1.56rem;
    background: #fff;
    border-radius: 0.04rem;
    text-align: center; //文字居中
    &__title {
      margin: 0.24rem 0 0 0;
      line-height: 0.26rem;
      font-size: 0.18rem;
      color: #333333;
    }
    &__desc {
      margin: 0.08rem 0 0 0;
      font-size: 0.14rem;
      color: #666666;
    }
    &__btns {
      display: flex;
      margin: 0.24rem 0.58rem 0 0.58rem;
    }
    &__btn {
      flex: 1;
      width: 0.8rem;
      line-height: 0.32rem;
      border-radius: 0.16rem;
      font-size: 0.14rem;
      &--first {
        margin-right: 0.12rem;
        border: 0.01rem solid #4fb0f9;
        color: #4fb0f9;
      }
      &--last {
        margin-left: 0.12rem;
        background: #4fb0f9;
        color: #fff;
      }
    }
  }
}
</style>
